<template>
  <div class="table-main">
    <el-dialog
      @close="handMyClose"
      :append-to-body="true"
      title="分配"
      :visible.sync="dialogVisible1"
      width="30%"
      node-key="id"
      :close-on-click-modal="false"
    >
      <div>
        <el-tree
          @check-change="checkChange"
          :data="options"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          ref="tree"
        ></el-tree>
        <!-- :default-checked-keys="keyArr" -->
      </div>
      <div style="margin-top:50px;"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="handFromSub('form')" :loading="bntLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'SidebarLogo',
  components: {},
  props: {
    isState: {
      type: Number,
      default: 0
    },
    roleID: {
      type: [Number, String]
    }
  },
  watch: {},
  data() {
    return {
      keyArr: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      bntLoading: false,
      dialogVisible1: false,
      headers: {
        token: localStorage.getItem('mytoken') || ''
      },
      options: [],
      ids: ''
    }
  },
  mounted() {
    this.$api.treePermission().then(res => {
      console.log(res.data.data, '路由分配')
      this.options = res.data.data
    })
  },
  methods: {
    async roleDetails(id) {
      this.keyArr = []
      let res = await this.$api.rolePermissionByid({ id })
      res.data.data.forEach(item => {
        this.keyArr.push(parseInt(item.mId))
      })
      this.$refs.tree.setCheckedKeys(this.keyArr)
      console.log(res, 'res', this.keyArr)
    },
    checkChange(data1, data2, data3) {
      let res = this.$refs.tree
        .getCheckedKeys()
        .concat(this.$refs.tree.getHalfCheckedKeys())

      this.ids = res.join(',')
      console.log('ceshi', this.ids)
    },
    handMyClose() {
      this.dialogVisible1 = false
      this.$refs.tree.setCheckedKeys([])
    },
    async handFromSub() {
      let newMsg = await this.$api.alloCation({
        menuid: this.ids,
        roleid: this.roleID
      })
      this.$message({
        message: newMsg.data.message,
        type: 'success'
      })
      this.$parent.init()
      this.dialogVisible1 = false
    },
    uploadChange() {}
  }
}
</script>

<style lang="scss" scoped>
.map_btn {
  width: 82px;
  height: 22px;
  background: rgba(56, 173, 147, 1);
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  margin-top: 8px;
}
/deep/ .el-form-item__label {
  font-size: 14px;
  color: #000;
  font-weight: bold;
}
.form_box {
  width: 80%;
  margin: 0 auto;
}
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #38ad93;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #38ad93;
  width: 336px;
  height: 90px;
  line-height: 90px;
  text-align: center;
}
.avatar {
  width: 336px;
  height: 90px;
  display: block;
}
</style>
